<script setup lang="jsx">
  import {watch,inject,ref,nextTick,reactive,computed} from 'vue'
import waybillTransport from '@/api/abroad/waybillTransport'
import { Message, Modal } from '@arco-design/web-vue'
import dicthelpApi from "@/api/dicthelpApi.js";
import tool from '@/utils/tool'
const columnsDist = inject('columnsDist')
// const crudFormShow=ref(false)
const span=ref(8)
const formRef=ref(null)
// 表单数据
const rules = {
      tray_count: [{ required: true, message:'请输入可装托盘数',validateTrigger: 'blur'}, ],
      // depot_id: [{ required: true, message:'请选择转运仓库',validateTrigger: 'blur'}, ],
      // number: [{ required: true, message:'请输入提单号',validateTrigger: 'blur'}, ],
      // container_no: [{ required: true, message:'请输入柜号',validateTrigger: 'blur'}, ],
      // container_type: [{ required: true, message:'请选择柜型',validateTrigger: 'blur'}, ],
      // service_id: [{ required: true, message:'请选择服务项目',validateTrigger: 'blur'}, ],
      // carrier: [{ required: true, message:'请选择承运商',validateTrigger: 'blur'}, ],
      // etd: [{ required: true, message:'请选择ETD',validateTrigger: 'blur'}, ],
      // eta: [{ required: true, message:'请选择ETA',validateTrigger: 'blur'}, ],
      // received_at: [{ required: true, message:'请选择入仓时间',validateTrigger: 'blur'}, ],
      // departure: [{ required: true, message:'请选择起运港',validateTrigger: 'blur'}, ],
      // destination: [{ required: true, message:'请选择目的港',validateTrigger: 'blur'}, ],
    }
const formData = ref({
  id:'',
  car_number: null, 
  type: null, 
  tray_count: null, 
  waybill_sea_id: null, 
  time: null, 
  describe: null,
  remark: null,
})
const visible = ref(false)
  const onShow = async (value) => {
    visible.value = true
    if(value){
      console.log('value',value)
      form.value=JSON.parse(JSON.stringify(value))
    }
    
  }

/*** 用户导入参数 */
const upload = reactive({
  // 是否显示弹出层（用户导入）
//   open: false,
  // 弹出层标题（用户导入）
  title: "",
  fileList:[],
  // 是否禁用上传
  isUploading: false,
  data:{
    image:''
  },
  // 是否更新已经存在的用户数据
  updateSupport: 0,
  // 设置上传的请求头部
  headers: { Authorization: "Bearer " + tool.getToken() },
  // 上传的地址
  url: import.meta.env.VITE_APP_BASE_URL + "/system/uploadImage"
});

const emits = defineEmits(['addClick','emitClick'])
  //新增 //编辑
  const handleBeforeOk =async (formEl) => {
      let formParse = JSON.parse(JSON.stringify(formData.value)); // 深拷贝数据
      console.log(' upload.fileList', upload.fileList)
      upload.fileList.map((item,index)=>{
          if(item.response?.data?.hash){
            formParse.file=item.response?.data?.hash
          }
        })
    if (!formEl) return
      await formEl.validate((valid) => {
        if (!valid) {
          if(formParse.id==''){
            waybillTransport.save(formParse).then(res => {
              Message.success(res.message || `新增成功！`)
              emits('addClick');
              close()
            })
          }else{
            waybillTransport.update(formParse).then(res => {
              Message.success(res.message || `编辑成功！`)
              emits('emitClick');
              close()
            })
          }
          
        }
      }) 
      
    };


    const close = () => {
      formRef.value.resetFields();
      visible.value = false
      upload.fileList=[]
    }
const onBeforeCancel=()=>{
  Modal.confirm({
        title: '确认关闭?',
        onOk: () => {
          close()
        },
      });
}
defineExpose({ onShow })
</script>

<template>
  <a-drawer v-model:visible="visible" v-if="visible" width="80%" :onBeforeCancel="onBeforeCancel">
        <template #title>
          <div >{{  formData.id == "" ? '新增' : '编辑'}}</div>
          </template>
          <a-form ref="formRef" :rules="rules" :model="formData">
            <div class="form-top-main">
            <a-col :span="span">
              <a-form-item field="car_number" label="车牌号" validate-trigger="change">
                <a-input v-model="formData.car_number"  placeholder="请输入车牌号" />
              </a-form-item>
            </a-col>
            <a-col :span="span">
              <a-form-item field="type" label="状态" validate-trigger="change">
                <a-input v-model="formData.type"  placeholder="请输入状态" />
              </a-form-item>
            </a-col>
            <a-col :span="span">
              <a-form-item field="waybill_sea_id" label="可装" validate-trigger="change">
                <a-input v-model="formData.waybill_sea_id"  placeholder="请输可装" />
              </a-form-item>
            </a-col>
            <a-col :span="span">
              <a-form-item field="time" label="时间" validate-trigger="change">
                <a-date-picker
                  style="width: 100%;"
                  placeholder="预计时间"
                  v-model="formData.time"
                />
              </a-form-item>
            </a-col>
            <a-col :span="span">
              <a-form-item label="描述" field="describe">
              <a-textarea v-model="formData.describe"  placeholder="请输入描述" />
            </a-form-item>
            </a-col>
            <a-col :span="span">
              <a-form-item label="备注" field="remark">
              <a-textarea v-model="formData.remark"  placeholder="请输入备注" />
            </a-form-item>
            </a-col>

          </div>
        </a-form>
        <template #footer> 
          <div style="display: flex; justify-content: space-between;align-items: center;">
            <div style="color: rgb(50 193 148);">
              <!-- tips：先选择"服务项目"后在操作明细,请按要求填写(导入)单据信息 -->
            </div>
            <div>
              <a-button @click="visible = false" style="margin-right: 20px;">关闭</a-button>
              <a-button type="primary" @click="handleBeforeOk(formRef)">
                保存
              </a-button>
            </div>
          </div>       
        </template>
      </a-drawer>

</template>
<style>
   .form-top-main{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
   }
   .tab-main{
    display: flex;
    align-items: center;
    margin: 10px 0;
   }
   .tab-main .arco-form-item{
    margin-bottom: 0;
   }
   .tab-main .arco-switch{
    margin-right: 20px;
   }
</style>